<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>登录</title>
  <script src="./js/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="./css/index.css">
  
</head>

<body>
  <div class="body">
    <!-- 登录 -->
    <div class="box">
      <div class="title">用户登录</div>
      <div class="content">
        <input class="input user" type="text" placeholder="请输入用户名" />
        <input class="input pwd" type="password" placeholder="请输入密码" />
        <div class="captcha">
          <input class="input cha" placeholder="请输入验证码" />
          <img src="/captcha" id="img"></img>
        </div>
        <div id='kong' style="color:red;margin-bottom:10px;font-size:12px;display: none;">请输入验证码</div>
        <div id='err' style="color:red;margin-bottom:10px;font-size:12px;display: none;">验证码不正确</div>
        <button class="button">登 录</button>
        <div class="bottom">
          <a href="javascript:;" id="reg">注册账号</a>
          <a href="javascript:;">忘记密码?</a>
        </div>
      </div>
    </div>
    <!-- 注册 -->
    <div class="register">
      <div class="title">用户注册</div>
      <div class="content">
        <input id="name" class="input user" type="text" placeholder="请输入昵称" />
        <input id="user" class="input user" type="text" placeholder="请输入用户名" />
        <input id="pwd" class="input pwd" type="password" placeholder="请输入密码" />
        <input id="pwd2" class="input pwd2" type="password" placeholder="请再次输入密码" />
        <div class="regcaptcha">
          <input class="input cha" placeholder="请输入验证码" />
          <img src="/captcha" id="img"></img>
        </div>
        <div id='regkong' style="color:red;margin-bottom:10px;font-size:12px;display: none;">请输入验证码</div>
        <div id='regerr' style="color:red;margin-bottom:10px;font-size:12px;display: none;">验证码不正确</div>
        <ul class="avatar">
          <li class="active">
            <img src="./img/1.webp" alt="" style="width: 50px; height: 50px" />
          </li>
          <li>
            <img src="./img/2.webp" alt="" style="width: 50px; height: 50px" />
          </li>
          <li>
            <img src="./img/3.webp" alt="" style="width: 50px; height: 50px" />
          </li>
          <li>
            <img src="./img/4.webp" alt="" style="width: 50px; height: 50px" />
          </li>
          <li>
            <img src="./img/5.webp" alt="" style="width: 50px; height: 50px" />
          </li>
          <li>
            <img src="./img/6.webp" alt="" style="width: 50px; height: 50px" />
          </li>
        </ul>
        <div class="regbtn">
          <button id="register" class="reg-btn">注 册</button>
          <button class="reg-btn login">返回登录</button>
        </div>
      </div>
    </div>


  </div>
  <script>
    let code;

    $(document).keydown((e) => {
      if (e.keyCode == 13) {
       code==200 && login();
      }
    });
    // 选择头像
    $(".avatar li").click(function () {
      $(this).addClass("active").siblings().removeClass("active");
    });
    // 注册用户
    $("#reg").click(function () {
      $(".box").hide();
      $(".register").show();
    });
    function clear() {
      $("#user").val("");
      $("#pwd").val("");
      $("#pwd2").val("");
      $('#name').val();
      $("li:first").addClass("active").siblings().removeClass("active");
    }
    // 注册
    $("#register").click(function () {
      code == 200 && register()
    });
    function register() {
      let data = {
        nickname: $('#name').val().trim(),
        username: $("#user").val().trim(),
        password: $("#pwd").val().trim(),
        password2: $("#pwd2").val().trim(),
        avatar: $("li img").attr("src"),
      };
      if (data.nickname && data.username && data.password && data.password2) {
        if (data.password == data.password2) {
          $.post(
            "/register",
            {
              nickname:data.nickname,
              username: data.username,
              password: data.password,
              avatar: data.avatar,
            },
            (res) => {
              console.log(res);
              if (res.code == 200) {
                showMessage("注册成功", 1);
                clear();
                $(".box").show();
                $(".register").hide();
              } else if (res.code == 201) {
                showMessage("用户名已存在", 0);
              } else {
                showMessage("注册失败", 0);
              }
            }
          );
        } else {
          showMessage("两次密码输入不一致", 0);
        }
      } else if (
        data.username == "" ||
        data.password == "" ||
        data.password2 == ""
      ) {
        showMessage("请输入完整信息", 0);
      }
    }
    //  返回登录
    $(".login").click(() => {
      $(".box").show();
      $(".register").hide();
    });
    // 登录
    $(".button").click(() => {
      code == 200 && login();
    });

    function login() {
      let user = $(".user").val().trim(),
        pwd = $(".pwd").val().trim();
      if (user && pwd) {
        $.post("/login", { username: user, password: pwd }, function (res) {
          console.log(res);
          if (res.code == 200) {
            showMessage("登录成功", 1);
            sessionStorage.setItem("token", res.token);
            location.href = "./chat.html";
          } else {
            showMessage("用户名密码不匹配", 0);
          }
        });
      } else {
        alert("请输入用户名和密码");
      }
    }

    // 获取验证码
    $('#img').on('click', function () {
      $(this).prop('src', '/captcha?=t' + Date.now())
    })
    // 验证码验证 
    $('.cha').blur(function () {
      let data = $(this).val().trim()
      if (data == '') {
        $('#kong').show()
        $('#regkong').show()
      } else {
        $.get('/verification', { code: data }, function (res) {
          code = res.code
          if (res.code !== 200) {
            $('#kong').hide()
            $('#err').show()
            $('#regkong').hide()
            $('#regerr').show()
          } else {
            $('#err').hide()
            $('#regerr').hide()
          }
        })
      }
    })
    // 弹窗
    function showMessage(message, type) {
      let messageJQ = $("<div class='showMessage'>" + message + "</div>");
      if (type == 0) {
        messageJQ.addClass("showMessageError");
      } else if (type == 1) {
        messageJQ.addClass("showMessageSuccess");
      }
      // 先将原始隐藏，然后添加到页面，最后以400毫秒的速度下拉显示出来
      messageJQ.hide().appendTo("body").slideDown(400);
      // 4秒之后自动删除生成的元素
      window.setTimeout(function () {
        messageJQ.show().slideUp(400, function () {
          messageJQ.remove();
        })
      }, 4000);
    }
  </script>
</body>

</html>